<template>
  <div ref="chart" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  data: Array<{ time: string; value: number }>
}>()

const chart = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

onMounted(() => {
  if (!chart.value) return
  chartInstance = echarts.init(chart.value)
  renderChart()
})

watch(() => props.data, renderChart)

const renderChart = () => {
  if (!chartInstance) return

  const option = {
    xAxis: {
      type: 'category',
      data: props.data.map(d => d.time)
    },
    yAxis: { type: 'value' },
    series: [{
      data: props.data.map(d => d.value),
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.6)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
        ])
      }
    }]
  }

  chartInstance.setOption(option)
}
</script>